import { defineStore } from 'pinia';
import defaultSettings from '@/config/settings.json';
import type { LayoutType } from '@/layout/component/types/const';
// @ts-ignore
import { generate, getRgbStr } from '@arco-design/color'
// @ts-ignore
import { AppState } from './types';

const useAppStore = defineStore('app', {
  // @ts-ignore
  state: (): AppState => ({ ...defaultSettings }),

  getters: {
    appCurrentSetting(state: AppState): AppState {
      return { ...state };
    },
    appDevice(state: AppState) {
      return state.device;
    },
  },

  actions: {
    // 更新配置
    updateSettings(partial: Partial<AppState>) {
      // @ts-ignore-next-line
      this.$patch(partial);
    },
    // 主题
    toggleTheme(dark: boolean) {
      if (dark) {
        this.theme = 'dark';
        document.body.setAttribute('arco-theme', 'dark');
      } else {
        this.theme = 'light';
        document.body.removeAttribute('arco-theme');
      }
    },
    toggleThemeColor(color: string) {
      if (!color) return
      this.themeColor = color
      const list = generate(this.themeColor, { list: true, dark: this.theme === 'dark' }) as string[]
      list.forEach((color, index) => {
        const rgbStr = getRgbStr(color)
        document.body.style.setProperty(`--primary-${index + 1}`, rgbStr)
      })
    },
    // 布局
    toggleLayout(layout: LayoutType) {
      if (layout === 'sidebar-nav') {
        this.menu = true;
        this.topMenu = false;
        this.hideMenu = false;
      }
      if (layout === 'header-nav') {
        this.menu = true;
        this.topMenu = true;
        this.hideMenu = false;
      }
    },
    // 设备
    toggleDevice(device: string) {
      this.device = device;
    },
    //隐藏菜单
    toggleMenu(value: boolean) {
      this.hideMenu = value;
    },
  },
});

export default useAppStore;
